<template>
  <el-row>
    <el-col :span="cols[0]" class="sea-card">
      <el-card shadow="hover">
        <span>按照网点过滤：{{ checkedNode.label }}</span>
        <el-tree :expand-on-click-node="false" default-expand-all :data="tree"
                 @node-click="onNodeClick"></el-tree>
      </el-card>
    </el-col>
    <el-col :span="cols[1]" class="sea-card">
      <el-card shadow="hover">
        <el-row>
          <span style="padding-left: 5px">当前选中：{{ checkedUser.name }}</span>
        </el-row>
        <el-row>
          <el-col :span="10" style="padding-left: 5px; padding-right: 5px;">
            <el-input v-model="username" @change="" placeholder="客户名称" size="small" clearable>
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </el-col>
        </el-row>
        <el-row>
          <div class="user-panel">
            <user-item v-for="(item, idx) in list" :key="idx" :item="item" :index="idx" :span="span"
                       :onchange="onSelect"></user-item>
          </div>
        </el-row>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
/* eslint-disable */
import UserItem from "./user-item";

const demo = [{
    label: '一级 1',
    children: [{
        label: '二级 1-1',
        children: [{
            label: '三级 1-1-1'
        }]
    }]
}, {
    label: '一级 2',
    children: [{
        label: '二级 2-1',
        children: [{
            label: '三级 2-1-1'
        }]
    }, {
        label: '二级 2-2',
        children: [{
            label: '三级 2-2-1'
        }]
    }]
}, {
    label: '一级 3',
    children: [{
        label: '二级 3-1',
        children: [{
            label: '三级 3-1-1'
        }]
    }, {
        label: '二级 3-2',
        children: [{
            label: '三级 3-2-1'
        }]
    }]
}];

const users = [
    {userName: '何其祥2', branchName: '城西分社', display: true, checked: false}
    , {userName: '何其祥', branchName: '城西分社', display: true, checked: false}
    , {userName: '何其祥', branchName: '城西分社', display: true, checked: false}
    , {userName: '何其祥', branchName: '城西分社', display: true, checked: false}
    , {userName: '何其祥', branchName: '城西分社', display: true, checked: false}
    , {userName: '何其祥', branchName: '城西分社', display: true, checked: false}
    , {userName: '何其祥', branchName: '城西分社', display: true, checked: false}
    , {userName: '何其祥', branchName: '城西分社', display: true, checked: false}
    , {userName: '何其祥', branchName: '城西分社', display: true, checked: false}
    , {userName: '何其祥', branchName: '城西分社', display: true, checked: false}
    , {userName: '何其祥', branchName: '城西分社', display: true, checked: false}
    , {userName: '何其祥', branchName: '城西分社', display: true, checked: false}
]

/**
 * 单选
 */
export default {
    components: {UserItem}
    , name: 'UserSelect'
    , props: {
        // 每一个用户面板所占用的栈格
        span: {type: Number, default: 4},
        // 左右面板的比例
        cols: {
            type: Array, default: () => {
                return [6, 18]
            }
        },
        // 已经选中的节点
        value: {type: String, default: undefined}
    }
    , data() {
        return {
            // 测试数据
            tree: demo,
            list: users,
            // 选中的树形节点
            checkedNode: {},
            // 用户搜索栏
            username: '',
            // 搜索栏表单输入
            searchForm: {keyword: ''},
            // 选中的用户
            checkedUser: {}
        }
    },
    created: function () {
    }, methods: {
        /**
         * 重新载入数据
         */
        reload: function () {
            this.$layers.multipleAjax([{
                url: '/authority/group/fully',
                method: 'GET',
                params: {}
            }, {
                url: '/authority/user/fully',
                method: 'GET',
                params: {}
            }]).then(([ret1, ret2]) => {
                if (ret1.code === 0 && ret2.code === 0) {
                    let list = this.$bamboo.wrapList(ret1.data, {label: 'name'});
                    this.tree = this.$bamboo.toTree(list);

                    list = ret2.data;
                    list.forEach(e => {
                        e.display = true;
                        e.checked = false;
                    })
                    this.list = list;

                    this.merge();
                }
            });
        },
        /**
         * 格式化用户列表，转换为 Vue 可直接使用的对象
         */
        wrapUser: function (user) {
            // 确定是否选中
            user.checked = (user.no === this.value);
            user.display = true;
            user.hidden = function () {
                user.display = false;
            };
            user.show = function () {
                user.display = true;
            };
            if (user.checked) {
                this.checkedUser = user;
            }
        },
        /**
         * 节点点击事件
         * @param data
         */
        onNodeClick(data) {
            this.checkedNode = data;
            this.filterData();
        },
        /**
         * 输入框变化时间
         */
        onTextChange: function (val) {
            this.username = val;
            this.filterData();
        },
        /**
         * 按照检索条件过滤数据
         */
        filterData: function () {
            this.list.forEach(user => {
                user.display = this.isHit(user)
            });
        },
        /**
         * 是否命中过滤条件
         * @param item
         */
        isHit: function (item) {
            let branchId = this.checkedNode.id;
            if (branchId !== undefined) {
                let hit = false;
                if (item.officeId === branchId) {
                    hit = true;
                } else {
                    hit = this.$layers.contain(item.parentIds, branchId);
                }
                // 未命中网点过滤选项
                if (!hit) {
                    return false;
                }
            }
            let username = this.username;
            if (this.$layers.isNotEmpty(username)) {
                return this.$layers.contain(item.name, username);
            } else {
                return true;
            }
        },
        /**
         * 单选，触发全选
         * @item 选中的值
         * @idx  选中序号
         */
        onSelect: function (item, idx) {
            for (let i = 0; i < this.list.length; i++) {
                let ele = this.list[i];
                ele.checked = ele.id === item.id;
                if (ele.checked) {
                    this.checkedUser = ele;
                }
            }
        },
        /**
         * 获取选中的用户 id 数组
         *
         * @field 字段
         */
        getSelectFields: function (field) {
            for (let i = 0; i < this.list.length; i++) {
                if (this.list[i].checked) {
                    return this.list[i][field];
                }
            }
        },
        /**
         * 获取选中的用户
         */
        getSelectUser: function () {
            for (let i = 0; i < this.list.length; i++) {
                for (let i = 0; i < this.list.length; i++) {
                    if (this.list[i].checked) {
                        return this.list[i];
                    }
                }
            }
        }
    }
}
</script>
<style scoped>
.user-panel {
    max-height: 472px;
    overflow: auto;
}
</style>

